<template>
    <section>
        <el-card class="box-card mt-20">
            <el-row>
                <el-col :span="18">
                    <div class="grid-content title">
                        <h4>{{ tableData.reportDto.title }}  &nbsp;</h4>
                        <p>
                            <span>整改状态 :</span> {{ dict.corrected_progress_status[tableData.reportDto.status]  }} &nbsp;<span v-if="tableData.reportDto.lastCorrectiveReportId">(第二阶段)</span>
                        </p>
                        <p>
                            <span>整改完成比例 :</span> {{ tableData.reportDto.total_fix_bugs }} /  {{ tableData.reportDto.total_bugs }}  &nbsp;
                        </p>
                    </div>
                </el-col>
                <el-col :span="6"  align="right">
                    <el-button @click="()=>this.$router.go(-1)"> 返 回 </el-button>
                </el-col>
              <!--  <el-col :span="24">
                    <el-button
                            type="primary"
                            v-if="tableData.reportDto.status != 2 || tableData.reportDto.status == 0"
                            @click="review('detail')"
                    > 查看报告 </el-button>
                    <el-button
                            :type="tableData.reportDto.status != 2 ? 'info' : 'primary'"
                            :disabled="tableData.reportDto.status != 2"
                            @click="review"
                    > 审核报告 </el-button>
                </el-col>-->


            </el-row>
            <el-row :gutter="10">
                <el-col :span="6" >
                    <div class="step-bar">
                        <span>第一阶段整改</span>


                        <el-button
                                @click="checkReportInfo(1)"
                                type="primary"

                        > 查看报告详情 </el-button>
                    </div>
                </el-col>
                <el-col :span="6" v-if="tableData.reportDto.lastCorrectiveReportId">
                    <div class="step-bar">
                        <span>第二阶段整改</span>


                        <el-button
                                @click="checkReportInfo"
                                type="primary"

                        > 查看报告详情 </el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table
                    :data="tableData.correctiveLogDtos"
                    v-loading="listLoading"
                    style="width: 100%; margin-top:20px;">
                <el-table-column
                        align="center"
                        label="序号"
                        width="80px"
                        type="index">
                </el-table-column>
                <el-table-column
                        label="操作者"
                        prop="opt_user_name">
                </el-table-column>
                <el-table-column
                        label="操作"
                        prop="opt_desc">
                </el-table-column>
                <el-table-column
                        align="left"
                        label="处理意见"
                        prop="suggestion">
                    <template slot-scope="scope">
                        <el-popover placement="right-end" title="处理意见" width="250" trigger="hover" v-if="scope.row.suggestion && scope.row.suggestion.length > 10" >
                            <div>{{scope.row.suggestion}}</div>
                            <span slot="reference">{{ substrLength(scope.row.suggestion) }}</span>
                        </el-popover>
                        <div v-else>{{scope.row.suggestion}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作日期"
                        prop="gmt_created">
                </el-table-column>
                <el-table-column label="相关文档" align="left" width="400">
                    <template slot-scope="scope">
                        <div>
                            <div v-for="(itemFile, indexFile) in scope.row.files" :key="indexFile" >
                                <a type="primary" href="javascript:;"  @click="downloadFile(itemFile.path,itemFile.origin_name )">
                                    {{ itemFile.origin_name }}
                                </a>
                            </div>
                            <div v-if="scope.row.corrective_file">
                                <a href="javascript:;" type="primary"
                                   @click="downloadFile(scope.row.corrective_file.path, scope.row.corrective_file.origin_name )"
                                >
                                    {{ scope.row.corrective_file.origin_name }}
                                </a>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </section>
</template>

<script>
    import { getCorrectedProgress } from '../../api/corrected_api'
    import {getResourceUrl} from "../../api/common";
    import dict from '../../common/js/dict';
    import { saveAs } from '../../common/js/commons';

    export default {
        name:'expertCorrectedDetail',
        data() {
            return {
                //表格数据
                //表格数据
                tableData: {
                    reportDto:{
                        title:'',
                        status:'',
                        total_fix_bugs:'',
                        total_bugs: ''
                    }
                },
                dict: dict,
                basis_url: '',
                listLoading:false
            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            checkReportInfo(step) {

                let id =""
                if (this.tableData.reportDto.lastCorrectiveReportId){
                    id = this.tableData.reportDto.lastCorrectiveReportId
                } else{
                    id =  this.tableData.reportDto.id
                }
                if (step === 1){
                    this.$router.push('/expert_corrected/review/' +  id )
                } else{
                    this.$router.push('/expert_corrected/review/' +   this.tableData.reportDto.id )

                }
            },
            review(val){
                if(val == 'detail'){
                    this.$router.push({
                        path:'/expert_corrected/review/' + this.tableData.reportDto.id,
                        query:{type:'detail'}
                    })
                } else{
                    this.$router.push('/expert_corrected/review/' + this.tableData.reportDto.id);
                }
            },
            downloadFile(url, name){
                saveAs(url, name)
            },
            substrLength(str){
                if(str && str.length > 10){
                    return str.substring(0,10) + '...'
                } else {
                    return str
                }
            },
            getTableData(){
                this.listLoading = true;
                let params = {
                    unit_id: this.$route.query.id,
                    year: this.$route.query.year.substring(0,4)
                }
                getCorrectedProgress(params).then(res => {
                    if (res.data.status == 200) {
                        let temp_data = JSON.parse(res.data.datas);
                        this.tableData = temp_data;
                        this.listLoading = false;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss" >
    .mt-20{
        margin-top: 20px;
    }
    .box-card {
        padding:20px 40px;
        .grid-content{
            &.title{
                h4{
                    font-size:24px;
                    color:#101010;
                    margin:0;
                }
                p{
                    display:inline-block;
                    // width:280px;
                    margin-right:20px;
                    color:#333;
                    span{
                        color:#888;
                    }
                }
            }
        }
    }
</style>
